<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="创建订单" :autoBack="true">
			</u-navbar>
		</view>

		<view class="con-body" style="background-color: #f8f8f8;">
			<view style="padding:0rpx 20rpx 0;font-weight: bold;">产品信息</view>
			<view class="main-service uni-cell-90" style="box-shadow: none;border-radius: 0;">
				<view style="padding:20rpx;">
					<view class="shopimg va_m">
						<!-- <image :src="image" mode="aspectFit"></image> -->
						<u-image :src="image" :lazy-load="true" width="100%" height="120rpx" mode="scaleToFill"></u-image>
					</view>
					<view class="shopinfo va_m">
						<view>{{name}}</view>
						<view class="price">
							<text style="color:red;">￥{{price}}</text>
							<text style="margin-left:30rpx;">{{theme}}</text>
						</view>
					</view>
				</view>
				<!-- <view class="user-list">
					<view style="padding: 5rpx 20rpx">
						<u-cell-group :border="false">
							<u-cell title="名称" :value="name"></u-cell>

							<u-cell title="类型" :value="theme"></u-cell>
							
							<u-cell title="价格" :value="price"></u-cell>
							
							<u-cell title="配送方式" value="物业配送"></u-cell>

							<u-cell title="封面">
								<view slot="value">
									<u-image :src="image" width="50" height="50" mode="aspectFit"></u-image>
								</view>
							</u-cell>
						</u-cell-group>
					</view>
				</view> -->
			</view>
			<view style="padding:20rpx 20rpx 0;font-weight: bold;">收货人信息</view>
			<view class="main-service uni-cell-90" style="box-shadow: none;border-radius: 0;">
				<view class="user-list" style="">
					<view style="padding: 5rpx 20rpx">
						<u-form-item label="联系人" prop="item.name" labelWidth="70" borderBottom>
							<u-input v-model="item.name" placeholder="请填写联系人" border="none"
								style="background-color: #FFFFFF;"></u-input>
						</u-form-item>

						<u-form-item label="联系电话" prop="item.tel" labelWidth="70" borderBottom>
							<u-input v-model="item.tel" placeholder="请填写联系电话" border="none"
								style="background-color: #FFFFFF;"></u-input>
						</u-form-item>

						<u-form-item label="收货地址" prop="item.tel" labelWidth="70" borderBottom>
							<u-input v-model="item.address" placeholder="请填写收货地址" border="none"
								style="background-color: #FFFFFF;"></u-input>
						</u-form-item>
					</view>
				</view>
			</view>


			<u-button :customStyle="btnStyle" @click="buy()">提交订单</u-button>
		</view>
	</view>
</template>

<script>
	import {
		createOrder
	} from "@/service/shareService.js";
	export default {
		data() {
			return {
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginLeft: '2%',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF',
					position: 'fixed',
					bottom: '40rpx'
				},
				id: 0,
				name: '',
				theme: '',
				price:0,
				image: '',
				item: {
					id: 0,
					name: '',
					tel: '',
					address: ''
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.name = options.name;
			this.theme = options.theme;
			this.image = options.image;
			this.price = options.price;
		},
		methods: {
			buy() {
				if (this.item.name == '') {
					uni.showToast({
						title: '联系人不能为空',
						icon: "error"
					});
					return;
				}
				if (this.item.tel == '') {
					uni.showToast({
						title: '联系电话不能为空',
						icon: "error"
					});
					return;
				}
				if (this.item.address == '') {
					uni.showToast({
						title: '收货地址不能为空',
						icon: "error"
					});
					return;
				}
				let par = {
					id: this.id,
					name: this.item.name,
					tel: this.item.tel,
					address: this.item.address
				}
				createOrder(par).then(res => {
					if (res.code == 200) {
						if (res.result == 'success') {
							uni.showToast({
								title: res.msg,
								icon: "success",
								complete() {
									let pages = getCurrentPages();
									let beforePage = pages[pages.length - 2];
									beforePage.$vm.reFresh = Math.random()
									uni.navigateBack({
										delta: 2
									})
								}
							});
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.result.timeStamp,
								nonceStr: res.result.nonceStr,
								package: res.result.package,
								signType: 'MD5',
								paySign: res.result.paySign,
								success: this.success,
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									showToast(err.requestPayment);
								}
							});
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						});
						return;
					}
				})
			},
			success(){
				uni.showToast({
					title: '支付成功',
					icon: "success",
					complete() {
						uni.navigateBack({
							delta: 2
						})
					}
				});
			}
		}
	}
</script>

<style>
	.shopimg{
		display: inline-block;
		width:22%;
	}
	.shopimg image{
		width:150rpx;
		height:100rpx;
	}
	.shopinfo{
		display: inline-block;
		width:73%;
		padding:15rpx;
	}
	.price{
		margin-top:20rpx;
		font-size: 28rpx;
		color:#666;
	}
</style>
